<template>
	<view>
		<view class="content">
			<uni-forms :rules="rules" :model="form" ref="formRef">
				<!-- 表单内容 -->
				<uni-forms-item name="name" class="form-item">
					<text class="label">收货人</text>
					<input class="input" placeholder="请填写收货人姓名" v-model="form.name" />
				</uni-forms-item>
				<uni-forms-item name="phone" class="form-item">
					<text class="label">手机号码</text>
					<input class="input" placeholder="请填写收货人手机号码" v-model="form.phone" />
				</uni-forms-item>
				<uni-forms-item name="fullLocation" class="form-item">
					<text class="label">所在地区</text>
					<picker class="picker" mode="region" :value="form.fullLocation.split(' ')" @change="onRegionChange">
						<view v-if="form.fullLocation">{{ form.fullLocation }}</view>
						<view v-else class="placeholder">请选择省/市/区(县)</view>
					</picker>
					<view class="map-select" @click="mapSelect">
						<uni-icons type="map" size="26"></uni-icons>
						<view>地图选择</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="address" class="form-item">
					<text class="label">详细地址</text>
					<uni-easyinput type="textarea" autoHeight v-model="form.address" placeholder="街道、楼牌号等信息" />
				</uni-forms-item>
				<uni-forms-item  name="useDefault" class="form-item">
					<text class="label">设为默认</text>
					<switch :checked="form.useDefault === 1" @change="changeDefault" />
				</uni-forms-item>
			</uni-forms>

		</view>
		<!-- 提交按钮 -->
		<button type="primary" class="button" @click="onSubmit">保存</button>
	</view>
</template>
<script>
	import {
		addMyAddress,
		getMyAddressById,
		editMyAddress
	} from '@/api/consomer/receiveAddressManage/receiveAddressManage.js'
	const chooseLocation = requirePlugin('chooseLocation');
	export default {
		data() {
			return {
				form: {
					name: '', // 收货人
					phone: '', // 联系方式
					fullLocation: '', // 省市区(前端展示)
					address: '', // 详细地址
					province: '',
					city: '',
					district: '',
					useDefault: 1,
				},
				eventChannel: undefined,
				id: '',
				rules: {
					name: {
						rules: [{ required: true, errorMessage: '请输入收货人' }],
					},
					phone: {
						rules: [
							{ required: true, errorMessage: '请输入联系方式' },
							{ pattern: '^1[3-9]\\d{9}$', errorMessage: '请输入正确的手机号' },
						],
					},
					fullLocation: {
						rules: [{ required: true, errorMessage: '请输入所在地区' }],
					},
					address: {
						rules: [{ required: true, errorMessage: '请输入详细地址' }],
					},
				}
			}
		},
		onShow() {
			const location = chooseLocation.getLocation()
			if (location) {
				this.form.province = location.province
				this.form.city = location.city
				this.form.district = location.district
				const fullAddre = location.province + location.city + location.district
				this.form.fullLocation = location.province + ' ' + location.city + ' ' + location.district
				let addr = location.address
				addr = addr.replace(fullAddre, "")
				this.form.address = addr + location.name
			}
		},
		onLoad(options) {
			this.eventChannel = this.getOpenerEventChannel();
			if (options.id) {
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
				this.id = options.id
				this.init()
			}
		},
		methods: {
			init() {
				if (this.id) {
					getMyAddressById(this.id).then((res) => {
						this.form = { ...res }
						this.form.fullLocation = res.province + ' ' + res.city + ' ' + res.district
					})
				}
			},
			mapSelect() {
				const key = 'QCOBZ-AZ43A-RURKK-CS55U-4TZ3E-VCFB6'; //使用在腾讯位置服务申请的key
				const referer = '107商圈'; //调用插件的app的名称

				wx.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}`
				});
			},
			onRegionChange(ev) {
				this.form.fullLocation = ev.detail.value.join(' ')
				this.form.province = ev.detail.value[0]
				this.form.city = ev.detail.value[1]
				this.form.district = ev.detail.value[2]
				this.form.address = ''
			},
			changeDefault(e) {
				this.form.useDefault = e.detail.value ? 1: 0
			},
			onSubmit() {
				this.$refs.formRef.validate().then(() => {
					uni.showModal({
						title:'是否保存',
						success: (r) => {
							if (r.confirm) {
								if (this.id) {
									editMyAddress({
										id: this.id,
										bo: this.form
									}).then((res) => {
										uni.showToast({
											icon: "success",
											title: '修改成功'
										})
										this.eventChannel.emit('needUpdate', { data: true })
										setTimeout(() => {
											uni.navigateBack()
										}, 500)
									})
								} else {
									addMyAddress(this.form).then((res) => {
										uni.showToast({
											icon: "success",
											title: '保存成功'
										})
										this.eventChannel.emit('needUpdate', { data: true })
										setTimeout(() => {
											uni.navigateBack()
										}, 500)
									})
								}
							}
						}
					})
					
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx 40rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 150rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 150rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.map-select {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-left: 1px solid #b1b1b1;
		align-items: center;
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: $base-color;
	}
</style>